<template>
    <el-card style="height: 100%;" class="card">
        <el-button class="add-btn" @click="openDialogOfAddInGroupCard()" type="primary">
            添加分类
        </el-button>
        <el-divider></el-divider>
        <div :class="`group-item ${groupCodeSelected == '' ? 'group-item-selected' : ''}`" @click="itemClick({ code: '' })">
            <div class="group-item-name">{{ store.appFront.all }}</div>
            <div class="group-item-code">All</div>
        </div>
        <div @contextmenu.prevent="rightClick" v-for="(item, index) in bodyData" :key="index">
            <el-popover placement="right" trigger="hover">
                <div style="text-align: center;">
                    <div class="opt-btn edit-btn"
                    @click="dialogOfSaveInGroupCard.open(item)"
                    >{{ store.appFront.edit }}</div>
                    <div>
                        <el-popconfirm title="是否确定删除?" :confirm-button-text="'确定'" :cancel-button-text="'取消'"
                            @confirm="deleteGroup(item)">
                            <template #reference>
                                <div class="opt-btn del-btn">
                                    {{ store.appFront.delete }}
                                </div>
                            </template>
                        </el-popconfirm>
                    </div>
                </div>
                <template #reference>

                    <div :class="`group-item ${groupCodeSelected == item.code ? 'group-item-selected' : ''}`"
                        @click="itemClick(item)">
                        <div class="group-item-name">{{ item.name }} </div>
                        <div class="group-item-code">{{ item.code }}</div>
                    </div>
                </template>
            </el-popover>
        </div>
        <DialogOfSaveInGroupCard @flush="getBodyData" ref="dialogOfSaveInGroupCard" />
    </el-card>
</template>

<script lang="ts" setup>
import $kt from '@/vueKantboot';
import { onMounted, ref, defineEmits } from 'vue';
import DialogOfSaveInGroupCard from './DialogOfSaveInGroupCard.vue';
import { useStore } from '@/stores/counter';

let dialogOfSaveInGroupCard = ref();
let groupCodeSelected = ref('');

let store = useStore();

const emits = defineEmits(["itemClick"]);

let itemClick = (item: any) => {
    emits("itemClick", item);
    groupCodeSelected.value = item.code;
};

/**
 * 打开添加分组弹窗
 */
let openDialogOfAddInGroupCard = () => {
    dialogOfSaveInGroupCard.value.open();
};


let bodyData = ref([{
    "description": "",
    "code": "",
    "name": "",
    "deleted": false,
}]);

let getBodyData = () => {
    $kt.request.request({
        url: '/adminManage/business/ovoShop/goodsType/getList',
        method: 'post',
        data: {},
    }).then((res: any) => {
        bodyData.value = res.data.data;
    });
};

let deleteGroup = (item: any) => {
    $kt.request.request({
        url: '/adminManage/business/ovoShop/goodsType/delete',
        method: 'post',
        data: {
            id: item.id
        }
    }).then((res: any) => {
        getBodyData();
    });
}

store.$onAction((json)=>{
    if(json.name == "setLanguageCode"){
        getBodyData();
    }
});


let rightClick = () => {
    console.log('rightClick');
};

onMounted(() => {
    getBodyData();
});

</script>

<style lang="scss" scoped>
.card {
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.add-btn {
    width: 100%;
    height: 40px;
}

.opt-btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    color: #666666;
}

.opt-btn:hover {
    background-color: #eeeeee;
    opacity: .7;
}


.opt-btn:active {
    opacity: .7;
}

.del-btn {
    color: rgba(255, 0, 0, 0.85);
}



.group-item {
    text-align: center;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    color: #666666;
    padding: 5px 0 5px 0;

    &:hover {
        background-color: #f5f7fa;
    }

    .group-item-name {
        font-size: 14px;
        font-weight: 500;
    }

    .group-item-code {
        font-size: 12px;
    }
}

.group-item-selected {
    background-color: #f5f7fa;
    color: #409eff;
}
</style>